import AutoComplete from 'antd/es/auto-complete';
import Divider from 'antd/es/divider';
import { AppStore } from '../../../../store';
import { useEffect, useMemo, useState } from 'react';
import { flattenModels } from '../../../../util';
import { BlockPicker } from 'react-color';
import message from 'antd/es/message';
import { EHighlightType, ISelectEventParam } from '@manycore/custom-ksg-viewer-sdk';
import Select from 'antd/es/select';
import InputNumber from 'antd/es/input-number';
import Switch from 'antd/es/switch';

export function HighlightDemo(props: {
    createButton: (infos: Array<{
        /** buttonName */
        name: string,
        onClick: () => void;
    }>) => JSX.Element[]
}) {
    const { createButton } = props;
    const { appState: { app, jsonData } } = AppStore.useContainer();
    const [inputModelId, setInputModelId] = useState<string>();
    const [color, setColor] = useState<string>('#C7FF8E');
    const [highlightType, setHighlightType] = useState<EHighlightType>(EHighlightType.BOX);
    const [opacity, setOpacity] = useState<number | undefined>(0.4);
    const [exclude, setExclude] = useState<boolean>(true);

    useEffect(() => {
        if (!app) {
            return;
        }
        const onListener = (param: ISelectEventParam) => {
            // 默认将选中的写入到input
            setInputModelId(param[0]?.id);
        }
        app.selectionService.on(onListener);
        return () => app.selectionService.off(onListener);
    }, [app])

    const models = useMemo(() => {
        return flattenModels(jsonData?.paramModel || []);
    }, [jsonData])

    const CModelApis = [{
        name: '高亮指定模型',
        onClick: () => inputModelId && app!.highlightService.highlight([{ id: inputModelId, color: color, opacity, type: highlightType }], exclude)
    }, {
        name: '取消指定模型高亮',
        onClick: () => inputModelId && app!.highlightService.unHighlight([inputModelId])
    }, {
        name: '取消全部模型高亮',
        onClick: () => app!.highlightService.clearHighlight()
    }, {
        name: '获取当前高亮模型',
        onClick: () => {
            const highlighted = app!.highlightService.getHighlighted();
            if (highlighted.length) {
                message.info(highlighted.join(';'))
            } else {
                message.error('未高亮任何模型!');
            }
        }
    }]

    return <>
        <Divider>模型高亮</Divider>
        <BlockPicker color={color} onChange={c => setColor(c.hex)} />
        <div className='scene-config-item'>
            <div className='common-title'>不透明度比例</div>
            <InputNumber value={opacity} onChange={(num) => setOpacity(num ?? undefined)} min={0} max={1} step={0.1} size='small'></InputNumber>
        </div>
        <AutoComplete value={inputModelId} onChange={(data) => setInputModelId(data)} style={{ width: '100%' }} placeholder='输入或者选择模型id' options={models.map(m => ({ value: m.id }))} />
        <div className='scene-config-item'>
            <Switch onChange={(v)=>setExclude(!v)} checkedChildren={'增量高亮'} unCheckedChildren={'全量高亮'} checked={!exclude}></Switch>
            <Select size='small' value={highlightType} onChange={(data) => setHighlightType(data)} options={[{
                value: EHighlightType.BOX,
                label: '整体高亮'
            }, {
                value: EHighlightType.WIREFRAME,
                label: '线框高亮'
            }]} />
        </div>
        {createButton(CModelApis)}
    </>
}